<template>
  <!-- 轮播图所在行 -->
  <van-row>
    <van-col :span="24">
      <!-- 轮播图 -->
      <van-swipe :autoplay="3000" lazy-render class="my-swipe" >
        <!-- 轮播图项  循环images展示不同的图片   图片链接就是我们之前上传在服务端的图片 -->
        <van-swipe-item v-for="image in images" :key="image">
          <img :src="image" />
        </van-swipe-item>
      </van-swipe>
    </van-col>
  </van-row>

  <van-row>
    <van-col :span="8">
        <div><van-icon name="https://fastly.jsdelivr.net/npm/@vant/assets/icon-demo.png" /></div>
        <div>商家</div>
    </van-col>
    <van-col :span="8">
      
    </van-col>
    <van-col :span="8">
      
    </van-col>
  </van-row>
  
</template>

<script setup>
import {ref} from 'vue';
    const images = ref([
      'http://localhost:8080/img/c055c12c11fb4981ac9e382e6a36003f777777.jpeg',
      'http://smk4ysaa0.hd-bkt.clouddn.com/22980c12618a4825ad6e0adb63a4184ccanguan003.jpg',
      'http://localhost:8080/img/f67de761780d48a98599ab5f887b508fmeishi001.jpg',
      'http://smk4ysaa0.hd-bkt.clouddn.com/5c660588418948b2900a148d9bd21876canguan002.jpg',
    ]);
</script>

<style scope>
  .my-swipe .van-swipe-item {
    width: 100%;
    text-align: center;
  }
  .my-swipe .van-swipe-item img{
    width: 100%;
    height: 250px;
  }
</style>